<template>
    <div :class="`shop-order-total-price ${mode}`" @click="openTip">
        <div class="discount-tip">
            <template v-if="noDiscountList.length > 0">
                优惠说明
                <MiniIcon :size="16" name="help" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
            </template>
        </div>
        <div class="total-price title-color">
            <div class="price-tip">{{label}}</div>
            <div class="price-value">
                <span class="label">￥</span>{{ totalPrice.toFixed(2) }}
            </div>
        </div>
    </div>
</template>

<script>
import { TechIcon, MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'OrderTotalPrice',
    mixins: [ModeMixin],
    components: {
        TechIcon,
        MiniIcon,
    },
    computed: {},
    props: {
        label: {
            type: String,
            default: '合计',
        },
        discountPrice: {
            type: Number,
            default: 0,
        },
        totalPrice: {
            type: [Number, String],
            default: 0,
        },
        noDiscountList: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        openTip() {
            if (this.$props.noDiscountList.length > 0) {
                this.$emit('showNoDiscountModal');
            }
        },
    },
};
</script>

<style lang="less">
.shop-order-total-price {
    font-family: @font-family-number;
    height: 55px;
    .flex();
    justify-content: space-between;
    align-items: center;
    .p-h(@gap-md);
    .border-line-top(rgba(125,125,131,0.2), @gap-md, @gap-md);
    .discount-tip {
        .font-size();
        color: @tip-color;
        .flex();
        justify-content: flex-start;
        align-items: center;
        .mini-icon {
            .m-l(@gap-sm);
        }
    }
    .total-price {
        .flex();
        align-items: center;
        justify-items: center;
        font-family: @font-family-number;
        font-weight: 500;
        color: @text-color;
        .price-tip {
            font-size: @shop-font-size;
        }
        .price-value {
            font-size: 19px;
            .label {
                font-size: @font-size;
                .m-r(-3);
            }
        }
    }
    &.black {
        .total-price {
            > span {
                color: @black-title-color;
            }
        }
    }
}
</style>

